<template>
    <div style="background: #e8e8e8; border-bottom: 0.5px solid;">
        <div class="page_content">
            <img class="title_img" src="@/assets/title.png" alt="">
            <ul class="institute_list">
                <li class="product-item" v-for="item in 8" :onclick="news">
                    <img src=" @/assets/202407161818352822.png" alt="">
                    <div class="time">2024.07.16</div>
                    <div class="title">「公园式商业」频繁上新，商场的户外场景「卷」疯了！</div>
                    <div class="more">read more</div>
                </li>
            </ul>
            <Pagination :totalPages="totalPages" :currentPage="currentPage" @update:currentPage="handlePageChange"
                class="pagination" />
        </div>
    </div>
</template>

<script setup>
import Pagination from "@/components/Pagination.vue"
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
const router = useRouter()
// 当前页
const currentPage = ref(1);

// 每页显示的数据数量
const itemsPerPage = 10;

// 总页数
const totalPages = 23;

function handlePageChange(page) {
    currentPage.value = page;
    console.log(currentPage.value);

}

const news = () => {
    router.push({ name: 'news' })
}

</script>

<style lang="scss" scoped>
.page_content {
    .title_img {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .institute_list {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        // height: 768px;


        .product-item {
            color: #333;
            width: 23%;
            height: 27rem;
            margin-right: 20px;
            margin-bottom: 20px;
            cursor: pointer;

            img {
                width: 100%;
            }

            .time {
                font-size: 15px;
                color: #909090;
                margin-bottom: 10px;
            }

            .title {
                font-size: 22px;
                margin-bottom: 1rem;
                min-height: 84px;
                font-weight: 500;
            }

            .more {
                color: #000;
                text-decoration: none;
                margin-top: 4rem;
                font-size: 0.8rem;
                border-bottom: 1px solid #9c9c9c;
                width: 64px;

                /* 灰色下划线 */
            }
        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }
}
</style>